<template>
  <div class="svg-progress-container">
    <!-- SVG环形进度条 -->
    <svg 
      class="progress-svg" 
      :width="size" 
      :height="size" 
      viewBox="0 0 100 100"
    >
      <!-- 背景圆环（灰色，填充透明） -->
      <circle
        class="progress-background"
        cx="50"
        cy="50"
        r="40"
        stroke="#e0e0e0"
        stroke-width="8"
        fill="none"
      />
      <!-- 进度圆环（动态颜色，通过stroke-dashoffset控制进度） -->
      <circle
        class="progress-circle"
        cx="50"
        cy="50"
        r="40"
        stroke="var(--progress-color, #4caf50)"
        stroke-width="8"
        fill="none"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="offset"
        stroke-linecap="round"
      />
    </svg>

    <!-- 进度文本（绝对居中） -->
    <div class="progress-text">
      {{ Math.round(percent) }}%
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, defineProps } from 'vue';

// 定义props（支持外部传入进度、尺寸、颜色）
const props = defineProps({
  percent: {
    type: Number,
    default: 0,
    validator: (value: number) => value >= 0 && value <= 100
  },
  size: {
    type: Number,
    default: 100
  },
  color: {
    type: String,
    default: '#4caf50'
  }
});

// 计算属性：圆环周长（2πr，r=40）
const circumference = computed(() => 2 * Math.PI * 40);

// 计算属性：进度偏移量（控制进度显示）
const offset = computed(() => {
  return circumference.value - (props.percent / 100) * circumference.value;
});

// 监听percent变化，更新CSS变量（用于动态颜色）
watch(() => props.color, (newColor) => {
  document.documentElement.style.setProperty('--progress-color', newColor);
}, { immediate: true });
</script>

<style scoped>
.svg-progress-container {
  position: relative;
  display: inline-block;
  width: v-bind('size + "px"');
  height: v-bind('size + "px"');
}

.progress-svg {
  transform: rotate(-90deg); /* 让进度从顶部开始 */
  transform-origin: 50% 50%;
}

.progress-background {
  stroke-linecap: round;
}

.progress-circle {
  transition: stroke-dashoffset 0.3s ease; /* 平滑动画 */
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(v-bind('size / 5') + 'px');
  font-family: Arial, sans-serif;
  color: #333;
  font-weight: bold;
}
</style>